<template>
  <div class="home-box">
    <el-container class="layout-container-demo" >
    <el-aside width="200px" class="Aside">
      <Aside></Aside>
    </el-aside>
      
    <el-container>
      <el-header style="text-align: right; font-size: 12px" class="Head">
        <Head></Head>
      </el-header>

      <el-main class="Content">
       <Content></Content>
      </el-main>
    </el-container>
  </el-container>
  </div>
  
</template>

<script setup>
import Head from "./Layout/Head/index.vue";
import Aside from "./Layout/Aside/index.vue"
import Content from "./Layout/Content/index.vue"
import { ref } from 'vue'

</script>

<style lang="scss" scoped>
.home-box{
  height: 100%;
  .el-container{
    height: 100%;
  }
}

.layout-container-demo .el-header {
  position: relative;
  background-color: rgba(2, 6, 62, 0.85);
  color: #fff;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>